<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2023-01-12 13:48:41
 * @LastEditors: yuxi
 * @LastEditTime: 2023-01-17 09:01:45
-->
<template>
  <div
    class="mining-contentmenu"
    ref="popup"
    @mousemove.stop
    @mouseenter.stop
    @mouseover.stop
  >
    <ul class="content-list">
      <li
        class="content-item"
        v-for="(menu, i) in contentMenus"
        :key="i"
        @click="handleClick(menu)"
      >
        {{ menu.label }}
      </li>
    </ul>
  </div>
</template>

<script>
import commonMixin from '../../mixins/base.js'
import Overlay from 'ol/Overlay';

export default {
  props: {
    // 位置
    position: {
      type: Array,
      default () {
        return null
      }
    },
    // 偏移量
    offset: {
      type: Array,
      default () {
        return [0, 0]
      }
    },
    // 自定义样式
    customClass: {
      type: [String, Object],
      default () {
        return ''
      }
    },
    // 是否显示
    visible: {
      type: Boolean,
      default () {
        return false
      }
    },
    // 菜单
    contentMenus: {
      type: Array,
      default () {
        return []
      }
    }
  },
  components: {},
  mixins: [commonMixin('widget')],
  data () {
    return {
      overlay: null
    }
  },
  watch: {
    position () {
      this.setPosition()
    },
    offset () {
      this.setOffset()
    },
    visible () {
      if (this.visible) {
        this.show()
      } else {
        this.hide()
      }
    }
  },
  created () {
    document.addEventListener('mousedown', this.documentMouseDown)
  },
  beforeDestroy () {
    document.removeEventListener('mousedown', this.documentMouseDown)
  },
  methods: {
    load () {
      const { map } = this
      const container = this.$refs.popup;
      this.overlay = new Overlay({
        element: container,
        offset: [
          0, 0
        ]
      });
      if (this.position) {
        this.setPosition();
      }
      map.addOverlay(this.overlay)
    },
    setPosition () {
      this.overlay.setPosition(this.position);
    },
    setOffset () {
      console.log(this.$refs)
      console.log('setOffset', this.$refs.popup.clientWidth)
      this.overlay.setOffset([
        -this.$refs.popup.clientWidth / 2 + this.offset[0],
        -this.$refs.popup.clientHeight - 11 + this.offset[1]
      ])
    },
    hide () {
      this.overlay.setPosition(undefined);
    },
    show () {
      this.setPosition()
    },
    handleClick (menu) {
      if (menu.onClick) {
        menu.onClick()
        this.hide()
      }
    },
    documentMouseDown (e) {
      console.log('', e.target.className)
      if (e.target.className !== 'content-item') {
        this.hide()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.mining-contentmenu {
  .content-list {
    list-style: none;
    background-color: white;
    border: 1px solid rgba(153, 153, 153, 0.2);
    padding: 0;
    margin: 0;

    .content-item {
      min-width: 100px;
      text-align: center;
      font-size: 14px;
      color: #666;
      cursor: pointer;
      padding: 8px 12px;
      border-bottom: 1px solid rgba(153, 153, 153, 0.2);

      &:hover {
        color: #409eff;
      }
    }
  }
}
</style>